<template>
  <view>
    <view class="search">
        <view class="search-input">
          <icon type="search" size="26rpx" class="serach-icon" />{{keyword}}
        </view>
    </view>
    <view class="tab">
      <block v-for="(item,index) in tabItem" :key="index">
        <view class="tab-item" :class="{active : index === tabIndex}">{{item}}</view>
      </block>
    </view>
    <view class="goods-list">
      <block v-for="(item,index) in goodsList" :key="index">
        <view class="goods-item" @tap="goToDeital(item.goods_id)">
          <img :src="item.goods_small_logo" alt="">
          <view class="goods-right">
            <view class="goods-title">{{item.goods_name}}</view>
            <view class="price">
              ￥<span>{{item.goods_price}}</span>.00
            </view>
          </view>
        </view>
      </block>
    </view>
    <view class="loading" v-if="dataLoad == false">
      你不要越过我的底线哦。
    </view>
  </view>
</template>

<script>
import request from '@/utils/request'
export default {
  data () {
    return {
      keyword:'',     //获取关键字
      tabItem:['综合','销售','价格'],  //切换栏
      tabIndex: 0,    //默认显示样式的tab栏
      pagenum:1,      //默认加载第一页
      goodsList:[],   //商品列表数组
      pagesize:20,    //每页显示条数
      dataLoad:true  //判断是否显示为最后的数据
    }
  },
  // 跳转到页面中的生命周期函数，获取到关键字
  onLoad(query){
    this.keyword = query.keyword
  },
  // 页面切换的时候重新加载数据
  onShow(){
     this.initData()
  },
  // 上拉加载数据
  onReachBottom(){
    this.getData()
  },
  // 下拉更新数据
  onPullDownRefresh(){
    // 重置页面、存储的数组和用于判断是否显示为最后的数据
     this.initData()
  },
  methods: {
    // 初始化数据
    initData(){
      this.pagenum=1
      this.goodsList=[]
      this.dataLoad=true
      this.getData()
    },
    // 加载数据的函数
    getData(){
      // 判断如果dataLoad的值为false时，不发送请求
      if(this.dataLoad == false){
        return
      }else {
        // 加载数据的提示，微信小程序自带api
         wx.showToast({
        title: '加载中',
        icon: 'loading',
        duration: 2000
      })
      // 请求数据
        request("https://www.zhengzhicheng.cn/api/public/v1/goods/search","GET",{query:this.keyword,pagenum:this.pagenum,pagesize:this.pagesize}).then(res => {
        console.log(res)
        // 通过返回的数据解构赋值给goods。注意goods必须与返回的数据下需要有goods才行
        let {goods} = res.data.message
        // 通过...语法把数组进行展开后合并，用于加载获取的数据
        this.goodsList = [...this.goodsList,...goods]
        // 每当获取完一次数据后，当前页码数加1
        this.pagenum += 1
        // 隐藏提示加载信息
        wx.hideToast({})
        // 当下拉刷新数据后隐藏下拉的动画
        wx.stopPullDownRefresh()
        // 判断当前获取到的数据的长度小于20的时候，修改dataLoad值为false，那么下次将不会再发送请求
        if(goods.length < 20){
          this.dataLoad = false
        }
    })
      }
    },
    // 跳转到商品详情页,并传递商品的id
    goToDeital(goods_id){
        wx.navigateTo({
        url: '/pages/goods_detail/main'+'?id='+goods_id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 搜索框样式 */
.search {
  background-color: #ff2d4a;
  position: fixed;
  width: 100%;
}
.search-input {
  height: 60rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 24rpx;
  margin: 20rpx 16rpx ;
}
.serach-icon {
  margin-right: 5px;
}
.tab{
    display: flex;
    border-bottom:1px #eee solid;
    padding-top: 100rpx;
    .tab-item{
        flex:1;
        text-align: center;
        line-height: 100rpx;
    }
    .active{
        color:red;
    }
}

.goods-list{
    padding-left:20rpx;
    .goods-item{
        padding:20rpx 20rpx 20rpx 0;
        display: flex;
        border-bottom:1px #eee solid;
        img{
            display: block;
            width:200rpx;
            height:200rpx;
            flex-shrink: 0;
            margin-right: 20rpx;
        }
        .goods-right{
            flex:1;
            display: flex;
            flex-direction:column;
            justify-content: space-between;
        }
        .goods-title{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .price{
            color:red;
            font-size: 14px;
            span{
                font-size: 22px;
            }
        }
    }
}
.loading{
    line-height: 80rpx;
    text-align: center;
    font-size:14px;
    color:#999;
}
</style>


